import React, { PureComponent } from 'react';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { Tooltip } from 'antd';
import { TableC } from '../../../../components';
import { connect } from 'dva';

@connect(({ TradeAnalysisNewM }) => ({ TradeAnalysisNewM }))
export default class TradeDetail extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      tableData: {},
      loading: false,
    };
  }

  componentDidMount() {
    const { searchObj } = this.props;
    if (searchObj) {
      const data = { ...searchObj, portfolioCodeList: JSON.stringify(searchObj.portfolioCodeList) };
      this.getData({
        ...data,
        numInPage: 10,
        currentPage: 1,
      });
    }
  }

  componentDidUpdate(prevProps) {
    if (JSON.stringify(this.props.searchObj) !== JSON.stringify(prevProps.searchObj)) {
      const data = { ...this.props.searchObj, portfolioCodeList: JSON.stringify(this.props.searchObj.portfolioCodeList) };
      this.getData({
        ...data,
        numInPage: 10,
        currentPage: 1,
      });
    }
  }

  // 表格分页
  handleTableChange = (pagination) => {
    const { current, pageSize } = pagination;
    const data = { ...this.props.searchObj, portfolioCodeList: JSON.stringify(this.props.searchObj.portfolioCodeList) };

    this.getData({
      ...data,
      numInPage: pageSize,
      currentPage: current,
    });
  };

  // 获取数据
  getData = (searchObj) => {
    this.setState({
      loading: true,
    });
    this.props.dispatch({
      type: 'tradeAnalysisNewM/getTradeDetail',
      payload: {
        ...searchObj,
      },
      callback: (data) => {
        if (data) {
          this.setState({
            tableData: { ...data },
          });
        }
        this.setState({
          loading: false,
        });
      },
    });
  };

  render() {
    const { tableData = {}, loading } = this.state;
    const { columns = [], dataSource = [], pageInfo = {} } = tableData;

    const newColums = columns.map((x) => {
      if (x.key === 'PRICE') {
        return {
          ...x,
          title: () => (
            <span>
              {x.title}{' '}
              <Tooltip title='资产类别为回购时，显示回购利率；资产类别为存款时，显示存款利率。'>
                <QuestionCircleOutlined />
              </Tooltip>
            </span>
          ),
          type: 'money',
          toFixed: 4,
        };
      }
      if (x.key === 'AMOUNT') {
        return {
          ...x,
          type: 'money',
        };
      } else if (x.key === 'QUANTITY') {
        return {
          ...x,
          type: 'money',
          // width: '15%',
        };
      } else {
        return {
          ...x,
          render: (text) => (text === '' ? '--' : text),
        };
      }
    });

    return (
      <TableC
        columns={newColums}
        dataSource={dataSource}
        current={Number(pageInfo.currentPage)}
        pageSize={pageInfo.numInPage}
        total={pageInfo.total}
        rowKey='KEY'
        loading={loading}
        onChange={this.handleTableChange}
      />
    );
  }
}
